<template>
	<view :data-theme="theme">
		<view class='sign-record'>
			<view class='list'>
				<div class="container">
					<div class="transaction-list">
						<div v-for="(record, index) in signList" :key="index" class="record">
							<div class="info">
								<div class="type" style="font-weight: 500;">{{ GetType(record.type) }}</div>
								<div class="amount" style="color: #f44336;">
									{{ record.amount}}<span>{{type ==='1' ? '喜豆':'通证'}}</span>
									<!-- <span style="color: #333; margin-left: 4px;font-size: 14px;">乐豆</span> -->
								</div>
							</div>
							<div class="time">{{ formatTime(record.createTime) }}</div>
						</div>
					</div>
				</div>
			</view>
			<view class='loadingicon acea-row row-center-wrapper'>
				<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadtitle}}
			</view>
		</view>
		<view class='noCommodity' v-if="!signList.length">
			<view class='pictrue text-center'>
				<view class="default_txt">暂无记录哦~</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getbeansrecord,
		getcenterlist
	} from '@/api/new.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	let app = getApp();
	export default {
		data() {
			return {
				urlDomain: this.$Cache.get("imgHost"),
				loading: false,
				loadend: false,
				loadtitle: '加载更多',
				page: 1,
				limit: 20,
				signList: [],
				theme: app.globalData.theme,
				type: null
			};
		},
		computed: mapGetters(['isLogin']),
		watch: {
			isLogin: {
				handler: function(newV, oldV) {
					if (newV) {
						this.getSignMoneList();
					}
				},
				deep: true
			}
		},
		onLoad(options) {
			this.type = options.type
			if (this.isLogin) {
				this.getSignMoneList();
			} else {
				toLogin();
			}
		},
		onReachBottom: function() {
			this.getSignMoneList();
		},
		methods: {
			/**
			 * 获取明细列表
			 */
			getSignMoneList: function() {
				let that = this;
				if (that.loading) return;
				if (that.loadend) return;
				that.loading = true;
				that.loadtitle = "";
				if (this.type === "1") {
					getbeansrecord({
						page: that.page,
						limit: that.limit
					}).then(res => {
						let list = res.data.list;
						that.$set(that, 'page', that.page + 1);
						let loadend = that.page > res.data.totalPage;
						that.signList = that.$util.SplitArray(list, that.signList);
						that.$set(that, 'signList', that.signList);
						that.loadend = loadend;
						that.loading = false;
						that.loadtitle = loadend ? "哼😕~我也是有底线的~" : "加载更多"
					}).catch(err => {
						that.loading = false;
						that.loadtitle = '加载更多';
					});
				} else {
					getcenterlist({
						page: that.page,
						limit: that.limit
					}).then(res => {
						let list = res.data.list;
						that.$set(that, 'page', that.page + 1);
						let loadend = that.page > res.data.totalPage;
						that.signList = that.$util.SplitArray(list, that.signList);
						that.$set(that, 'signList', that.signList);
						that.loadend = loadend;
						that.loading = false;
						that.loadtitle = loadend ? "哼😕~我也是有底线的~" : "加载更多"
					}).catch(err => {
						that.loading = false;
						that.loadtitle = '加载更多';
					});
				}
			},
			GetType(type) {
				// 1-兑换盲盒，2-盲盒收益，3-系统增加，4-系统扣减，5-积分兑换，6-用户转出，7-用户转入，8-提现，9-兑换通证
				let data = ""
				if (type === 1) {
					data = "兑换盲盒"
				} else if (type === 2) {
					data = "盲盒收益"
				} else if (type === 3) {
					data = "系统增加"
				} else if (type === 4) {
					data = "系统扣减"
				} else if (type === 5) {
					data = "积分兑换"
				} else if (type === 6) {
					data = "用户转出"
				} else if (type === 7) {
					data = "用户转入"
				} else if (type === 8) {
					data = "提现"
				} else if (type === 9) {
					data = "兑换通证"
				}
				return data
			},
			formatTime(time) {
				return time.replace('T', ' ').substring(0, 19);
			},
		}
	}
</script>

<style lang="scss">
	.sign-record {
		padding: 30rpx;
	}

	.font_color {
		@include main_color(theme);
	}

	.default_txt {
		font-size: 26rpx;
		color: #999;
		text-align: center;
	}

	.noCommodity {
		margin-top: 60%;
	}

	.container {
		width: 100%;
		padding-top: 50px;
		max-width: 600px;
		margin: 0 auto;
	}

	.container-panel {
		background-color: #f44336;
		width: 100%;
		height: 430rpx;
		padding: 10px 20px 20px 20px;
	}

	.body-tab {
		z-index: 999;
		width: 92%;
		margin: 0 auto;
		background-color: #FFFFFF;
		border-top-right-radius: 10px;
		border-top-left-radius: 10px;
		position: relative;
		top: -50px;
	}

	.tabs {
		display: flex;
		padding-top: 2rpx;
		height: 51px;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		font-size: 30rpx;
		color: #333;
		padding: 24rpx 0;
		position: relative;
	}

	.tab-item.active {
		color: #f44336;
		font-weight: bold;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 80rpx;
		height: 6rpx;
		background: #FFFFFF;
		border-radius: 3rpx;
	}


	.overview {
		text-align: center;
		align-items: center;
		background-color: #f44336;
	}

	.overview1 {
		width: 100%;
		display: flex;
	}

	.item {
		width: 33%;
		background: #f44336;
		padding: 15px;
		border-radius: 8px;
		text-align: center;
	}

	.item1 {
		background: #f44336;
		padding: 15px;
		border-radius: 8px;
		text-align: center;
	}

	.label {
		color: #fff;
		font-size: 13px;
		margin-bottom: 5px;
	}

	.label1 {
		color: #fff;
		font-size: 15px;
		margin-bottom: 5px;
	}

	.value {
		font-size: 16px;
		font-weight: 500;
		color: #fff;
	}

	.value1 {
		color: #fff;
		font-weight: 700;
		font-size: 50rpx;
	}

	.score-section {
		position: relative;
		top: -45px;
		width: 95%;
		margin: 0 auto;
		padding: 15px;
		background: #fff9eb;
		border-radius: 8px;
	}

	.score-info {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.btn-upgrade {
		margin-left: auto;
		padding: 5px 15px;
		background: #ffd700;
		border: none;
		border-radius: 4px;
		cursor: pointer;
	}

	.tip {
		color: #999;
		font-size: 12px;
	}

	.transaction-list {
		width: 94%;
		margin: 0 auto;
		position: relative;
		top: -35px;
		border-top: 1px solid #eee;
		padding-top: 15px;
	}

	.record {
		padding: 10px 0;
		border-bottom: 1px solid #eee;
	}

	.info {
		display: flex;
		justify-content: space-between;
		margin-bottom: 5px;
	}

	.time {
		color: #999;
		font-size: 12px;
		text-align: right;
	}

	.text-green {
		color: #4CAF50;
	}

	.text-red {
		color: #f44336;
	}

	.mores-txt {
		width: 100%;
		align-items: center;
		justify-content: center;
		height: 70rpx;
		color: #999;
		font-size: 24rpx;

		.iconfont {
			margin-top: 2rpx;
			font-size: 20rpx;
		}
	}
</style>